<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试.html</title>
    <!--导入js package-->
    <script type="text/javascript" src="../01-vue_js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--js的表达式-->
    <h1 v-show="result">Hello! {{name.toUpperCase()}}</h1>
    <br>
    <h1 v-show="result">Hello! {{name.toUpperCase()}}</h1>
    <br>
    <h1 v-show="1===1">Hello! {{name.toUpperCase()}}</h1>
    <br>
    <h1 v-if="false">{{name.toUpperCase()}}</h1>

    <hr>
    <h2>当前的n的值为：{{n}}</h2>
    <button @click="n++">点我+1</button>
    <div v-show="n===1"> Angular</div>
    <div v-show="n===2"> React</div>
    <div v-show="n===3"> Vue</div>
    <div v-else-if="n===4"> JAva</div>
    <!-- v-else和v-else-if -->
    <div v-else> python</div>

    <template v-if="n==8">
        <div>go</div>
        <div>js</div>
        <div>hadoop</div>
    </template>

</div>

<script type="text/javascript">
    // 关闭开发环境的警告提示
    Vue.config.productionTip = false
    // 创建vue的对象
    new Vue({
        el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data: {  // data中用于存储数据，数据供e1所指定的容器去使用。 先成为一个对象
            name: "jiale",
            result: true,
            n: 0,
        }
    })
</script>
</body>
</html>